import React from 'react';
import { useLocation } from 'react-router-dom';
import PageTransition from './components/PageTransition';

// 应用布局组件，提供页面过渡动画
function Layout({ children }) {
  const location = useLocation();
  
  // 根据不同路径设置不同的过渡效果
  const getTransitionMode = () => {
    const { pathname } = location;
    
    // 定义不同页面的过渡效果
    switch (pathname) {
      case '/':
        return 'legal'; // 首页使用法律风格的过渡
      case '/game-select':
        return 'slideLeft'; // 游戏选择页使用左滑动画
      case '/style-select':
        return 'slideLeft'; // 风格选择页使用左滑动画
      case '/case-select':
        return 'slideLeft'; // 案例选择页使用左滑动画
      case '/game':
        return 'scale'; // 游戏页使用缩放动画
      case '/tutorial':
        return 'fade'; // 教程页使用淡入淡出
      case '/settings':
        return 'slideDown'; // 设置页使用下滑动画
      default:
        return 'fade'; // 默认使用淡入淡出
    }
  };
  
  return (
    <PageTransition 
      mode={getTransitionMode()}
      duration={0.4}
      location={location}
    >
      {children}
    </PageTransition>
  );
}

export default Layout;
